import React from 'react'
import '../../styles/5-10/tab.scss'
class Tab extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            curCls: 1
        }
    }
    tabFn(e, index) {
        this.setState({
            curCls: index
        })
    }
    render() {
        const { curCls } = this.state
        return (
            <>
                <div className='m400'>
                    <ul className='ltab_btn'>
                        <li className={curCls === 1 ? 'cur' : ''} onClick={(e) => { this.tabFn(e,1) }}>菜单一</li>
                        <li className={curCls === 2 ? 'cur' : ''
                        } onClick={(e) => { this.tabFn(e,2) }}>菜单二</li>
                        <li className={curCls === 3 ? 'cur' : ''} onClick={(e) => { this.tabFn(e,3) }}>菜单三</li>
                    </ul>
                    <ol className='ltab_box'>
                        <li className={curCls === 1 ? 'cur' : ''}>第一模块</li>
                        <li className={curCls === 2 ? 'cur' : ''}>第二模块</li>
                        <li className={curCls === 3 ? 'cur' : ''}>第三模块</li>
                    </ol>
                </div>
            </>
        )
    }
}
export default Tab